import { useMDXComponents } from 'scenes/onboarding/OnboardingDocsContentWrapper'

export const OpenRouterInstallation = (): JSX.Element => {
    const { Steps, Step, CodeBlock, CalloutBox, ProductScreenshot, OSButton, Markdown, Blockquote, dedent, snippets } =
        useMDXComponents()

    const NotableGenerationProperties = snippets?.NotableGenerationProperties
    return (
        <Steps>
            <Step title="Install the PostHog SDK" badge="required">
                <Markdown>
                    Setting up analytics starts with installing the PostHog SDK for your language. LLM analytics works
                    best with our Python and Node SDKs.
                </Markdown>

                <CodeBlock
                    blocks={[
                        {
                            language: 'bash',
                            file: 'Python',
                            code: dedent`
                                pip install posthog
                            `,
                        },
                        {
                            language: 'bash',
                            file: 'Node',
                            code: dedent`
                                npm install @posthog/ai posthog-node
                            `,
                        },
                    ]}
                />
            </Step>

            <Step title="Install the OpenAI SDK" badge="required">
                <Markdown>Install the OpenAI SDK. The PostHog SDK instruments your LLM calls by wrapping the OpenAI client. The PostHog SDK **does not** proxy your calls.</Markdown>

                <CodeBlock
                    blocks={[
                        {
                            language: 'bash',
                            file: 'Python',
                            code: dedent`
                                pip install openai
                            `,
                        },
                        {
                            language: 'bash',
                            file: 'Node',
                            code: dedent`
                                npm install openai
                            `,
                        },
                    ]}
                />
            </Step>

            <Step title="Initialize PostHog and OpenAI client" badge="required">
                <Markdown>
                    We call OpenRouter through the OpenAI client and generate a response. We'll use PostHog's OpenAI
                    provider to capture all the details of the call. Initialize PostHog with your PostHog project API
                    key and host from [your project settings](https://app.posthog.com/settings/project), then pass the
                    PostHog client along with the OpenRouter config (the base URL and API key) to our OpenAI wrapper.
                </Markdown>

                <CodeBlock
                    blocks={[
                        {
                            language: 'python',
                            file: 'Python',
                            code: dedent`
                                from posthog.ai.openai import OpenAI
                                from posthog import Posthog

                                posthog = Posthog(
                                    "<ph_project_api_key>",
                                    host="<ph_client_api_host>"
                                )

                                client = OpenAI(
                                    baseURL="https://openrouter.ai/api/v1",
                                    api_key="<openrouter_api_key>",
                                    posthog_client=posthog # This is an optional parameter. If it is not provided, a default client will be used.
                                )
                            `,
                        },
                        {
                            language: 'ts',
                            file: 'Node',
                            code: dedent`
                                import { OpenAI } from '@posthog/ai'
                                import { PostHog } from 'posthog-node'

                                const phClient = new PostHog(
                                  '<ph_project_api_key>',
                                  { host: '<ph_client_api_host>' }
                                );

                                const openai = new OpenAI({
                                  baseURL: 'https://openrouter.ai/api/v1',
                                  apiKey: '<openrouter_api_key>',
                                  posthog: phClient,
                                });

                                // ... your code here ...

                                // IMPORTANT: Shutdown the client when you're done to ensure all events are sent
                                phClient.shutdown()
                            `,
                        },
                    ]}
                />

                <Blockquote>
                    <Markdown>**Note:** This also works with the `AsyncOpenAI` client.</Markdown>
                </Blockquote>

                <CalloutBox type="fyi" icon="IconInfo" title="Proxy note">
                    <Markdown>
                        These SDKs **do not** proxy your calls. They only fire off an async call to PostHog in the
                        background to send the data. You can also use LLM analytics with other SDKs or our API, but you
                        will need to capture the data in the right format. See the schema in the [manual capture
                        section](https://posthog.com/docs/llm-analytics/installation/manual-capture) for more details.
                    </Markdown>
                </CalloutBox>
            </Step>

            <Step title="Call OpenRouter" badge="required">
                <Markdown>
                    Now, when you call OpenRouter with the OpenAI SDK, PostHog automatically captures an
                    `$ai_generation` event. You can also capture or modify additional properties with the distinct ID,
                    trace ID, properties, groups, and privacy mode parameters.
                </Markdown>

                <CodeBlock
                    blocks={[
                        {
                            language: 'python',
                            file: 'Python',
                            code: dedent`
                                response = client.responses.create(
                                    model="gpt-5-mini",
                                    input=[
                                        {"role": "user", "content": "Tell me a fun fact about hedgehogs"}
                                    ],
                                    posthog_distinct_id="user_123", # optional
                                    posthog_trace_id="trace_123", # optional
                                    posthog_properties={"conversation_id": "abc123", "paid": True}, # optional
                                    posthog_groups={"company": "company_id_in_your_db"},  # optional
                                    posthog_privacy_mode=False # optional
                                )

                                print(response.choices[0].message.content)
                            `,
                        },
                        {
                            language: 'ts',
                            file: 'Node',
                            code: dedent`
                                const completion = await openai.responses.create({
                                    model: "gpt-5-mini",
                                    input: [{ role: "user", content: "Tell me a fun fact about hedgehogs" }],
                                    posthogDistinctId: "user_123", // optional
                                    posthogTraceId: "trace_123", // optional
                                    posthogProperties: { conversation_id: "abc123", paid: true }, // optional
                                    posthogGroups: { company: "company_id_in_your_db" }, // optional
                                    posthogPrivacyMode: false // optional
                                });

                                console.log(completion.choices[0].message.content)
                            `,
                        },
                    ]}
                />

                <Blockquote>
                    <Markdown>
                        {dedent`
                        **Notes:**
                        - We also support the old \`chat.completions\` API.
                        - This works with responses where \`stream=True\`.
                        - If you want to capture LLM events anonymously, **don't** pass a distinct ID to the request.

                        See our docs on [anonymous vs identified events](https://posthog.com/docs/data/anonymous-vs-identified-events) to learn more.
                        `}
                    </Markdown>
                </Blockquote>

                <Markdown>
                    {dedent`
                        You can expect captured \`$ai_generation\` events to have the following properties:
                    `}
                </Markdown>

                {NotableGenerationProperties && <NotableGenerationProperties />}
            </Step>

            <Step
                checkpoint
                title="Verify traces and generations"
                subtitle="Confirm LLM events are being sent to PostHog"
                docsOnly
            >
                <Markdown>
                    Let's make sure LLM events are being captured and sent to PostHog. Under **LLM analytics**, you
                    should see rows of data appear in the **Traces** and **Generations** tabs.
                </Markdown>

                <br />
                <ProductScreenshot
                    imageLight="https://res.cloudinary.com/dmukukwp6/image/upload/SCR_20250807_syne_ecd0801880.png"
                    imageDark="https://res.cloudinary.com/dmukukwp6/image/upload/SCR_20250807_syjm_5baab36590.png"
                    alt="LLM generations in PostHog"
                    classes="rounded"
                    className="mt-10"
                    padding={false}
                />

                <OSButton
                    variant="secondary"
                    asLink
                    className="my-2"
                    size="sm"
                    to="https://app.posthog.com/llm-analytics/generations"
                    external
                >
                    Check for LLM events in PostHog
                </OSButton>
            </Step>
        </Steps>
    )
}
